<template>
  <div></div>
</template>
<script lang="ts" setup>
// import { inject onMounted } from 'vue';
import { inject, onMounted, onBeforeUnmount } from 'vue';
defineOptions({
  name: 'Mars3dLayer'
});
let graphicLayer;
const { hooks, mapInstance, AC_NAME, MARS3D_NAME, useEmitt }: any = inject('main');
const goToShenZhen = () => {
  mapInstance.value.map.flyToPoint([113.976202, 22.586404], {
    radius: 26815.5,
    heading: 360,
    pitch: -90,
    duration: 1.5
  });
};

const drawPolygon = () => {
  const graphic = new mars3d.graphic.PolygonEntity({
    positions: [
      [113.944899, 22.542885, 100],
      [113.944999, 22.536006, 10],
      [113.950339, 22.535932, 100],
      [113.95425, 22.542958, 100],
      [113.948947, 22.543217, 100]
    ],
    style: {
      color: '#3388ff',
      opacity: 0.5,
      outline: true,
      outlineWidth: 3,
      outlineColor: '#ffffff',
      label: {
        text: '我是数字孪生底座polygon',
        font_size: 18,
        color: '#ffffff',
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 500000,
        distanceDisplayCondition_near: 0
      }
    },
    attr: { remark: '示例1' },
    flyTo: true
  });
  graphicLayer.addGraphic(graphic);
};

onMounted(() => {
  // 创建矢量数据图层
  graphicLayer = new mars3d.layer.GraphicLayer();
  mapInstance.value.map.addLayer(graphicLayer);
});

onBeforeUnmount(() => {
  graphicLayer.remove();
  graphicLayer = null;
});

defineExpose({
  goToShenZhen,
  drawPolygon
});
</script>
<style lang="less" scoped></style>
